<template>
  <div class="studyRecord">
    <div class="studyRecord-header">
      <BoxBorder title-button="学习记录" />
    </div>
    <div class="studyRecord-centent">
      <div class="studyRecord-centent-search">
        <el-form
          ref="form"
          size="medium"
          label-position="right"
          class="user-consume-search"
          :model="formSearch"
          label-width="110px"
          :inline="true"
        >
          <el-form-item label="时间查询：">
            <el-date-picker
              v-model="formSearch.dateVal"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              value-format="yyyy-MM-dd"
            /></el-form-item>

          <el-form-item label="课程状态：">
            <el-select
              v-model="formSearch.classState"
              placeholder="请选择课程状态"
            >
              <el-option
                v-for="(item, index) in classStateList"
                :key="index"
                :label="item.state"
                :value="item.type_id"
              />
            </el-select>
          </el-form-item>

          <el-form-item label="课程/老师名：" :inline-message="true">
            <div class="user-consume-search-input">
              <input v-model="formSearch.inputVal">
              <el-button
                style="float: right; padding-right: 30px; height: 40px"
                type="primary"
                icon="el-icon-search"
              >搜索</el-button>
            </div>
          </el-form-item>
        </el-form>
      </div>
      <div class="studyRecord-centent-table">
        <el-table
          :data="studyRecordList"
          style="width: 100%"
          :border="true"
          :header-cell-style="headerStyle"
        >
          <el-table-column label="上课时间" width="width" align="center">
            <template slot-scope="scope">
              <div>
                {{ scope.row.date }}
              </div>
              <div>
                {{ scope.row.time }}
              </div>
            </template>
          </el-table-column>
          <el-table-column
            prop="currentname"
            label="课程名称"
            width="width"
            align="center"
          />
          <el-table-column
            prop="teachername"
            label="老师"
            width="width"
            align="center"
          />
          <el-table-column label="课程状态" width="width" align="center">
            <template slot-scope="scope">
              <div v-show="scope.row.isFinish == 1">
                <el-tag>{{ scope.row.state }}</el-tag>
              </div>
              <div v-show="scope.row.isFinish == 2">
                <el-tag type="warning">{{ scope.row.state }}</el-tag>
              </div>
              <div v-show="scope.row.isFinish == 3">
                <el-tag type="success">{{ scope.row.state }}</el-tag>
              </div>
              <div v-show="scope.row.isFinish == 4">
                <el-tag type="danger">{{ scope.row.state }}</el-tag>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="我的评价" width="width" align="center">
            <template slot-scope="scope">
              <div v-if="scope.row.isFinish == 1">
                <el-button type="info" disabled>
                  {{ scope.row.my_eva }}</el-button>
              </div>
              <div v-else-if="scope.row.isFinish == 2">
                <div v-show="scope.row.myEva == 0">
                  <el-button type="warning" @click="sumbitStuEva(scope.row.class_id,scope.row.teacher_id)">{{ scope.row.my_eva }} </el-button>
                </div>
              </div>
              <div v-else-if="scope.row.isFinish == 3">
                <el-button type="success" @click="selectStuEva(scope.row.class_id,scope.row.teacher_id)">{{ scope.row.my_eva }}</el-button>
              </div>
              <div v-else />
            </template>
          </el-table-column>
          <el-table-column
            label="老师的评价"
            width="width"
            align="center"
          >
            <template slot-scope="scope">

              <div v-if="scope.row.isFinish == 1">
                <el-button type="info" disabled>
                  {{ scope.row.teacher_eva }}</el-button>
              </div>
              <div v-else-if="scope.row.isFinish == 2">
                <div v-show="scope.row.teaEva == 1">
                  <el-button type="success" @click="getTeacherEvaluate(scope.row.class_id,scope.row.teacher_id)">{{ scope.row.teacher_eva }}</el-button>
                </div>
                <div v-show="scope.row.teaEva == 0">
                  <el-button type="warning">{{ scope.row.teacher_eva }} </el-button>
                </div>
              </div>
              <div v-else-if="scope.row.isFinish == 3">
                <div v-show="scope.row.teaEva == 1">
                  <el-button type="primary" @click="getTeacherEvaluate(scope.row.class_id,scope.row.teacher_id)">{{ scope.row.teacher_eva }}</el-button>
                </div>
                <div v-show="scope.row.teaEva == 0">
                  <el-button type="warning">{{ scope.row.teacher_eva }} </el-button>
                </div>
              </div>
              <div v-else />
            </template>
          </el-table-column>
          <el-table-column
            prop="lastcurrnum"
            label="扣除课时"
            width="width"
            align="center"
          />
        </el-table>
      </div>
    </div>
    <div class="studyRecord-footer">
      <el-pagination
        :current-page="currentPage"
        :page-sizes="[5, 7, 10]"
        :page-size="limit"
        layout=" prev, pager, next, jumper,->,total, sizes"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
    <!-- 学生写评价 -->
    <el-dialog title="给老师的评价" top="7vh" :visible.sync="dialogFormVisible" class="dialog" :center="true">
      <el-form :model="stuForm">
        <el-form-item label="上课效果:">
          <el-rate
            v-model="stuForm.effect"
            :colors="colors"
          />
        </el-form-item>
        <el-form-item label="老师发音:">
          <el-rate
            v-model="stuForm.pronunciation"
            :colors="colors"
          />
        </el-form-item>
        <el-form-item label="教学背景:">
          <el-rate
            v-model="stuForm.background"
            :colors="colors"
          />
        </el-form-item>
        <el-form-item label="教学品质:">
          <el-rate
            v-model="stuForm.quality"
            :colors="colors"
          />
        </el-form-item>
        <el-form-item label="教学方法:">
          <el-rate
            v-model="stuForm.style"
            :colors="colors"
          />
        </el-form-item>
        <el-form-item label="教材难度:">
          <el-rate
            v-model="stuForm.difficulty"
            :colors="colors"
          />
        </el-form-item>
        <el-form-item label="是否准时上课:">
          <el-radio v-model="stuForm.ontime" label="1">是</el-radio>
          <el-radio v-model="stuForm.ontime" label="0">否</el-radio>
        </el-form-item>
        <el-form-item label="评价内容:">
          <el-input v-model="stuForm.msg" type="textarea" />
        </el-form-item>

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="handleDialog(false)">取 消</el-button>
        <el-button type="primary" @click="handleDialog(true)">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 查看学生的评价 -->

    <el-dialog title="给老师的评价" top="7vh" :visible.sync="selectStuEvaFrom" class="dialog" :center="true">
      <el-form :model="newStuForm">
        <el-form-item label="上课效果:">
          <el-rate
            v-model="newStuForm.effect"
            :colors="colors"
            disabled
          />
        </el-form-item>
        <el-form-item label="老师发音:">
          <el-rate
            v-model="newStuForm.pronunciation"
            :colors="colors"
            disabled
          />
        </el-form-item>
        <el-form-item label="教学背景:">
          <el-rate
            v-model="newStuForm.background"
            :colors="colors"
            disabled
          />
        </el-form-item>
        <el-form-item label="教学品质:">
          <el-rate
            v-model="newStuForm.quality"
            :colors="colors"
            disabled
          />
        </el-form-item>
        <el-form-item label="教学方法:">
          <el-rate
            v-model="newStuForm.style"
            :colors="colors"
            disabled
          />
        </el-form-item>
        <el-form-item label="教材难度:">
          <el-rate
            v-model="newStuForm.difficulty"
            :colors="colors"
            disabled
          />
        </el-form-item>
        <el-form-item label="是否准时上课:">

          <el-radio v-model="newStuForm.ontime" disabled label="1">是</el-radio>
          <el-radio v-model="newStuForm.ontime" disabled label="0">否</el-radio>
        </el-form-item>
        <el-form-item label="评价内容:">
          <el-input v-model="newStuForm.msg" disabled type="textarea" />
        </el-form-item>

      </el-form>

    </el-dialog>
    <!-- 查看老师的评价 -->
    <el-drawer
      v-if="teaEvaInfo[0]"
      title="老师对我的评价"
      :visible.sync="drawer"
      :direction="direction"
      custom-class="drawer"
      :before-close="handleClose"
    >
      <div class="drawer-img">
        <img :src="teaEvaInfo[1][0].class_img" alt="">
      </div>
      <div class="drawer-content">
        <div>课程名称:{{ teaEvaInfo[1][0].currentname }}</div>
        <div>老师名字:{{ teaEvaInfo[2][0].teachername }}</div>
        <div>老师对你的评价</div>
        <div v-if="teaEvaInfo[2][0].effect &&teaEvaInfo[2][0].effect.length > 1" class="drawer-content-rate">上课效果:
          <el-rate
            v-model="teaEvaInfo[2][0].effect"
            :colors="colors"
            disabled
            style="margin-top:-2px;margin-left:10px;"
          />
        </div>
        <div v-if="teaEvaInfo[2][0].performance" class="drawer-content-rate">学生发音:
          <el-rate
            v-model="teaEvaInfo[2][0].performance"
            :colors="colors"
            disabled
            style="margin-top:-2px;margin-left:10px;"
          />
        </div>
        <div><span>老师对你评价:</span>
          <el-input v-model="teaEvaInfo[2][0].msg" disabled type="textarea" />
        </div>

      </div>
    </el-drawer>

  </div>
</template>

<script>
export default {
  data() {
    return {
      selectStuEvaFrom: false,
      drawer: false,
      direction: 'rtl',
      colors: ['#99A9BF', '#F7BA2A', '#FF9900'],
      currentPage: 1,
      limit: 5,
      total: 0,
      formSearch: {
        dateVal: [],
        classState: '',
        inputVal: ''
      },
      studyRecordList: [],
      classStateList: [],
      dialogFormVisible: false,
      stuForm: {
        effect: 0,
        pronunciation: 0,
        background: 0,
        quality: 0,
        style: 0,
        difficulty: 0,
        ontime: '1',
        msg: '',
        classId: '',
        teacherId: ''
      },
      newStuForm: {
        effect: 5,
        pronunciation: 5,
        background: 5,
        quality: 5,
        style: 5,
        difficulty: 5,
        ontime: '1',
        msg: '好'
      },
      teaEvaInfo: []
    }
  },
  mounted() {
    this.getStudyRecord()
    this.getClassState()
  },
  methods: {
    handleClose(done) {
      this.drawer = false
      done()
    },
    headerStyle({ rowIndex, row }) {
      if (rowIndex === 0) {
        return 'background:rgba(237,208,108,0.5);height:60px'
      }
    },
    // 获取课程信息
    async getStudyRecord() {
      const { data } = await this.$API.user.getStudyRecord(
        this.currentPage,
        this.limit
      )
      this.total = data.count
      data.rows.forEach((item) => {
        switch (item.state + '') {
          case '待上课':
            item.isFinish = 1
            break
          case '待评价':
            item.isFinish = 2
            item.myEva = 0
            if (item.teacher_eva + '' === '查看老师的评价') {
              item.teaEva = 1
            } else {
              item.teaEva = 0
            }
            break
          case '已完成':
            item.isFinish = 3
            if (item.teacher_eva + '' === '查看老师的评价') {
              item.teaEva = 1
            } else {
              item.teaEva = 0
            }
            item.myEva = 1
            break
          case '退课':
            item.isFinish = 4
            break
        }
        item.date = this.$dayjs(item.start_time).format('YYYY-MM-DD')
        item.time = this.$dayjs(item.start_time).format('H:ss:mm')
      })
      this.studyRecordList = data.rows
    },
    // 获得课程状态
    async getClassState() {
      const { data } = await this.$API.user.getClassState()
      this.classStateList = data
    },
    handleSizeChange(limit) {
      this.limit = limit
      this.getStudyRecord()
    },
    handleCurrentChange(page) {
      this.currentPage = page
      this.getStudyRecord()
    },
    // 得到老师评价
    async getTeacherEvaluate(classId, teacherId) {
      const { data } = await this.$API.classAPI.getTeacherEvaluate(classId, teacherId)
      if (data[2][0].effect) data[2][0].effect = parseInt(data[2][0].effect)
      if (data[2][0].performance) data[2][0].performance = parseInt(data[2][0].performance)
      if (data[2][0].ontime) data[2][0].ontime = parseInt(data[2][0].ontime)
      this.teaEvaInfo = data
      this.drawer = true
    },
    // 提交学生评价
    sumbitStuEva(classId, teacherId) {
      this.dialogFormVisible = true
      this.stuForm.classId = classId
      this.stuForm.teacherId = teacherId
    },
    async handleDialog(bool) {
      this.dialogFormVisible = false
      const newStuForm = {}
      for (const key in this.stuForm) {
        newStuForm[key] = this.stuForm[key] + ''
      }
      try {
        if (bool) {
          const { data } = await this.$API.classAPI.sumbitStuEva(newStuForm)
          if (data) {
            this.getStudyRecord()
          }
        } else {
          console.log('不评价')
        }
      } catch (err) {
        console.log(err)
      }
      Object.assign(this.$data.stuForm, this.$options.data().stuForm)
    },
    async selectStuEva(classId, teacherId) {
      const { data } = await this.$API.classAPI.selectStuEva(classId, teacherId)
      console.log(data)
      this.selectStuEvaFrom = true
    }
  }
}
</script>

<style lang="scss" scoped>
.studyRecord-header {
  margin-bottom: 80px;
}
.studyRecord-centent {
  &-search {
    margin: 40px 0;
    input {
      -webkit-appearance: none;
      background-color: #fff;
      background-image: none;
      border-radius: 4px;
      border: 1px solid #dcdfe6;
      box-sizing: border-box;
      color: #606266;
      display: inline-block;
      font-size: inherit;
      height: 40px;
      line-height: 40px;
      outline: 0;
      padding: 0 15px;
      transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
      width: 300px;
      margin-right: 3px;
    }
  }
}
.studyRecord-footer {
  text-align: center;
  margin: 40px;
}
.dialog{
  display: flex;
  justify-content: center;
  align-items: center;
}
.drawer{
  display: flex;
  justify-content: center;
  padding:  0 20px;
  font-size: 20px;
  &-img{
    display: block;
    margin:  0 auto;
    width: 200px;
    height: 250px;
    margin-bottom:40px;
    img{
      width: 100%;
      height: 100%;
    }
  }
  &-content{
    font-size: 20px;
    padding: 10px 0;
    margin: 0 20px;
    &-rate{
      display: flex;
      align-items: center;
      margin: 10px 0;
    }
}

}
</style>
